<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置手机号</title>
    <link rel="stylesheet" href="/css/amazeui.min.css">
    <link rel="stylesheet" href="/css/amazeui.cropper.css">
    <link rel="stylesheet" href="/css/custom_up_img.css">


    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/commone.css">
    <link rel="stylesheet" media="screen and (min-width:481px)" href="/css/usercenter.css">
    <link rel="stylesheet" media="screen and (max-width:480px)" href="/css/usercenter(1).css">

    <script src="/js/hm.js"></script>
    <script type="text/javascript">
        var basePath = "/";
    </script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/footfixed.js"></script>

    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>

        .phone-p {
            display: flex;
            align-items: center;
            margin: 30px 0;
        }
        .change-modul {
            font-size: 14px;
            color: #333;
            margin: 20px;
        }
        .phone-p-title {
            width: 80px;
            text-align: right;
            margin-right: 20px;
        }
        .new-input {
            width: 414px;
            padding: 8px 10px;
            box-sizing: border-box;
            outline: 0;
            border: 1px solid rgba(41,167,230,1);
            border-radius: 5px;
        }
        .phone-p {
            display: flex;
            align-items: center;
            margin: 30px 0;
        }
        .phone-p-title {
            width: 80px;
            text-align: right;
            margin-right: 20px;
        }
        .change-modul {
            font-size: 14px;
            color: #333;
            margin: 20px;
        }
        .change-input {
            width: 300px;
            padding: 8px 10px;
            box-sizing: border-box;
            outline: 0;
            border: 1px solid rgba(41,167,230,1);
            border-radius: 5px;
        }
        .send-btn {
            margin-left: 20px;
            padding: 8px 0;
            width: 94px;
            border: 0;
            outline: 0;
            background: rgba(41,167,230,1);
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .subm-btn {
            float: right;
            padding: 8px 16px;
            border: 0;
            outline: 0;
            background: rgba(41,167,230,1);
            background: #ccc;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 30px;
        }


    </style>

</head>
<body>
<div class="change-modul">
    <div class="next-step">
        <p class="phone-p">
            <span class="phone-p-title">新手机号</span>
            <input class="new-input" type="text" placeholder="请输入新手机号">
        </p>
        <p class="phone-p">
            <span class="phone-p-title">验证码</span>
            <input class="change-input" type="text" placeholder="请输入短信验证码" id="code2">
            <button type="button" class="send-btn">发送验证码</button>
        </p>
        <button type="button" class="subm-btn">提交</button>
    </div>
    <script>
        $(function(){
            // $(".next-step").hide();

            //第一步，发送验证码
            $(".check-btn").click(function(){
                var clickObj=this;
                //调用服务器发送验证码接口
                $.post(basePath+"user/center/update/sendCode/phone",function(datas){
                    if(datas.success){
                        daojishi(90,clickObj);
                    }else{
                        layer.msg(datas.msg);
                    }
                });
            })
            //点击下一步
            $(".next-btn").click(function(){
                var checkcode = $("#code1").val();
                if(checkcode == ''){
                    layer.msg("请输入验证码！");
                    return false;
                }
                // 校验验证码接口
                $.post(basePath+"user/center/update/confirm/phone?userName=xx&code="+checkcode,function(datas){
                    if(datas.success){
                        $(".modul-div").hide();
                        $(".next-step").show();
                    }else{
                        layer.msg(datas.msg);
                    }
                });
            });

            //最后一步验证码
            $(".send-btn").click(function(){
                var  newPhone=$(".new-input").val();
                if(isNotPhone(newPhone)){
                    layer.msg("请输入正确的手机号码");
                    return false;
                }
                var clickObj=this;
                $.post("/userPhoneUpd?userName="+newPhone+"&code=",function(datas){
                    if(datas.code==201 || datas.code == 200 || datas.code == 202){
                        layer.msg(datas.message);
                        daojishi(90,clickObj);
                        changeSubmitButStatus();//改变提交按钮状态，颜色
                    }else{
                        layer.msg(datas.message);
                    }
                });
            })
            //最后一步提交
            $(".subm-btn").click(function(){
                var checkcode = $("#code2").val();
                var  newPhone=$(".new-input").val();
                if(checkcode == ''){
                    layer.msg("请输入验证码！");
                    return false;
                }
                if(isNotPhone(newPhone)){
                    layer.msg("请输入正确的手机号码");
                    return false;
                }
                $.post("/userPhoneUpdAdd?userName="+newPhone+"&code="+checkcode,function(datas){
                    console.log(datas)
                    if(datas.code==201){
                        layer.msg(datas.message);
                        layerClose(1500,true);
                    }else{
                        layer.msg(datas.message);
                    }
                });
            })
            //设置提交按钮颜色
            function changeSubmitButStatus(){
                $(".subm-btn").css("background-color","#1482C8");
            }
            function daojishi(seconds,obj){

                if (seconds > 1){
                    $(obj).css("background-color","#ccc");

                    $(".next-btn").attr("disabled", false).css("background-color","#1482C8");
                    seconds--;
                    $(obj).text(seconds+"s后重新发送").attr("disabled", true);//禁用按钮
                    // 定时1秒调用一次
                    setTimeout(function(){
                        daojishi(seconds,obj);
                    },1000);
                }else{
                    $(obj).css("background-color","#1482C8");
                    $(obj).text("发送验证码").attr("disabled", false);//启用按钮
                    $(".next-btn").attr("disabled", true).css("background-color","#ccc");
                }
            }
        })
    </script>
</div>
</body>
</html>